<template>
  <div>
    <div class="search">
        <input v-model="cityValue" class="search-input" type="text" placeholder="输入城市或拼音">
    </div>
    <div class="wraper" v-show="isShowSearchArea" ref="wraper">
        <div>
          <div class="char-search border-bottom" @click="handleChangeCity(item)" v-for="(item, index) of searchCityList" :key="index">
              {{ item }}
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'CitySearch',
  props: {
    list: Object
  },
  data () {
    return {
      cityValue: '',
      searchCityList: [],
      isShowSearchArea: false,
      flag: false
    }
  },
  methods: {
    handleChangeCity (city) {
      this.$store.commit('changeCity', city)
      this.$router.push('/')
    }
  },
  watch: {
    cityValue () {
      if (this.cityValue !== '') {
        this.isShowSearchArea = true
      } else {
        this.isShowSearchArea = false
      }
      this.flag = false
      this.searchCityList = []
      for (let key in this.list) {
        this.list[key].forEach((item, index) => {
          if (item.name.indexOf(this.cityValue) > -1 || item.spell.indexOf(this.cityValue) > -1) {
            this.searchCityList.push(item.name)
            this.flag = true
          }
        })
      }
      if (!this.flag) {
        this.searchCityList.push('没有找到匹配')
      }
    }
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.wraper)
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
    .border-bottom
        &::before
            border-color #777
        &::after
            border-color #777
    .search
        text-align center
        background $bgColor
        height .72rem
        line-height .72rem
        padding 0 .2rem
        .search-input
            width 100%
            height .52rem
            line-height .52rem
            font-size .2rem
            border-radius .1rem
            text-align center
            padding 0 .2rem
            color #666
    .wraper
        overflow hidden
        position absolute
        top 1.58rem
        left 0
        right 0
        bottom 0
        background #eee
        z-index 2
        .char-search
            padding .2rem
            color #424242
</style>
